<template>
  <div class="_wrap">
    <div class="_box">
      <subTit title="本年装备预算执行情况"/>
      <div class="list">
        <div class="item" v-for="(item, i) in data1" :key="i">
          <div class="label">{{item.label}}</div>
          <div class="progressBar">
            <div class="_outer" :style="{'--width': `${item.value}%`}"></div>
          </div>
          <div class="text">{{item.value}}%</div>
        </div>
      </div>
    </div>
    <div class="_box">
      <subTit title="本年基建预算执行情况"/>
      <div class="list">
        <div class="item" v-for="(item, i) in data2" :key="i">
          <div class="label">{{item.label}}</div>
          <div class="progressBar">
            <div class="_outer" :style="{'--width': `${item.value}%`}"></div>
          </div>
          <div class="text">{{item.value}}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import subTit from '../components/subTit'
  export default {
    name: 'itemCenterB2',
    components: { subTit },
    data() {
      return {
        data1: [
          {label: '幼儿园', value: 42},
          {label: '小学', value: 46},
          {label: '初中', value: 35},
          {label: '高中', value: 30},
          {label: '中职', value: 38},
          {label: '其他', value: 35}
        ],
        data2: [
          {label: '幼儿园', value: 32},
          {label: '小学', value: 33},
          {label: '初中', value: 36},
          {label: '高中', value: 38},
          {label: '中职', value: 29},
          {label: '其他', value: 28}
        ]
      }
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  ._wrap {
    display: grid; grid-template-columns: 1fr 1fr; grid-gap: 24px;
    ._box {
      background: rgba(0,16,43,0.32); border: 1px solid; border-image: linear-gradient(to bottom, rgba(8,132,255, .1), rgba(8,132,255,1)) 1;
      overflow: hidden; height: 290px;
      display: grid; grid-template-rows: 34px auto;
      .__subTit { margin-top: -4px; margin-left: -3px; }
    }
    .list {
      padding: 6px 0; display: flex; flex-direction: column;
      justify-content: space-evenly;
      .item {
        display: flex; align-items: center; padding: 4px 8px;
        .label { font-size: 16px; font-family: PingFangSC;  min-width: 60px; margin-right: 10px; text-align: right; color: rgba(255,255,255,.85)}
        .progressBar {
          width: 100%; height: 14px; background: rgba(7,124,220,0.24); overflow: hidden; border-radius: 6px;
          padding: 3px;
          ._outer {
            background: linear-gradient(270deg, #63F3FF 0%, #47A4FF 100%)!important; height: 100%; border-radius: 6px;
            animation: progress 2s; animation-delay: 0.5s; animation-fill-mode: forwards;
          }
          @keyframes progress {
            from {
              width: 0;
            }
            to {
              width: var(--width);
            }
          }
        }
        .text { min-width: 50px; margin-left: 10px; font-size: 20px; font-family: DINPro; }
      }
    }
  }
</style>
